<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .button2{
            margin-top: 20px;
        }
        .boxInp{
            display: flex;
        }
        table{
                margin-top: 20px;
            th,td{
                padding: 20px 50px;
            }
        }
    </style>
</head>
<body>
<script></script>
<div id="app">
    <h1>学生信息系统</h1>
    <div class="button1">
        <button v-if="bool" @click="change">添加学生</button>
        <div v-else class="boxInp">
            <button @click="add" >确定添加</button>
            <button @click="change">取消添加</button>
            <div>
                <input type="text" placeholder="学生姓名" v-model="name">
                <input type="text" placeholder="学生年龄" v-model="age">
                <input type="text" placeholder="学生分数" v-model="score">
            </div>
        </div>

    </div>

    <div class="button2">
        <button @click=" flag='age'; sortOn()">按年龄排序</button>
        <button @click=" flag='score'; sortOn()">按分数排序</button>
    </div>
    <table border="1" cellspacing="0" > <!-- border属性仅用于演示，实际应用中建议使用CSS来设置样式 -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>分数</th>

        </tr>
        <tr v-for="item in informationList" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.score }}</td>
        </tr>
        <!-- 可以继续添加更多的行和列 -->
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

    new Vue({
        el: '#app',

        data:{
            flag:'',
            name:'',
            age:'',
            score:'',
            bool:true,
            informationList:[
                {
                    name:'张三',
                    age: 18,
                    score:88
                }
            ],
        },
        methods:{
            change(){
                return this.bool = !this.bool;
            },
            add(){
                if(this.name===''||this.age===''||this.score==='')return alert('请输入内容')

                this.informationList.push(
                    {
                        name:this.name,
                        age: this.age,
                        score:this.score
                    }
                )
                this.name=''
                this.age=''
                this.score=''
            },

            sortOn(){
                this.informationList.sort((a,b)=>{
                    if(this.flag==="score") return a.score-b.score
                    if(this.flag==="age") return a.age-b.age
                } )
            }
        }

    })


</script>


</body>
</html>